<template>
  <div class="wrap">
    <div style="width: 100%; height: 8px; background: #f4f6f8"></div>
    <div id="edit_file" :class="'edit_container' + start">
      <quill-editor
        class="editor"
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)"
        @ready="onEditorReady($event)"
      >
      </quill-editor>
    </div>
    <!-- 设置 -->
    <div class="set-up" :class="'set-up' + start">
      <div class="set-up-img">
        <div @click="openAlbumClick()" id="quill-upload">
          <img :src="picture" alt="" style="margin-left: 16px" />
        </div>
        <div class="set-structure" @click="layOut">
          <img v-if="lay_type" :src="richTextGray" alt="" @click="btns" />
          <img v-else :src="richTextGray" alt="" @click="btns1" />
        </div>
      </div>
      <!-- A -->
      <div class="font-size" @click="sizeShow" v-if="fontSizeShow">
        <img
          v-if="size_Show"
          :src="fontSizeLight"
          alt=""
          @click="fontSizeBtn"
        />
        <img v-else :src="fontSizeGray" alt="" @click="fontSizeGrayBtn" />
      </div>
      <div class="verticalLine"></div>
      <!-- 富文本字体编辑 -->
      <div id="toolbar" slot="toolbar" v-show="isShow">
        <!-- 字体大小 -->
        <select class="ql-size">
          <option value="small"></option>
          <option value="large" selected></option>
          <option value="huge"></option>
        </select>
        <!-- 色值 -->
        <div class="colorSelectionIndex">
          <div
            class="font-color"
            v-show="fontColour"
            v-for="(item, index) in colorList"
            :key="index"
          >
            <button
              class="ql-color"
              :value="item.value"
              :class="{ colorActive: currentIndex === index }"
              @click="colorSelectionBtn(index)"
            ></button>
          </div>
        </div>
        <!-- 颜色选择 -->
        <div
          @click="colorShow"
          v-if="colour"
          :class="'colorSelection' + colorIndex"
        >
          <img
            v-if="color_Show"
            :src="colourGray"
            alt=""
            @click="colourGrays"
          />
          <img v-else :src="colourLight" alt="" @click="colourLights" />
        </div>
        <!-- 富文本黑体 -->
        <div class="toolbar">
          <button class="ql-bold" v-show="sizeBold"></button>
        </div>
        <!-- 文本 -->
        <div class="text-tags">
          <button class="ql-list" value="bullet" v-show="textTags"></button>
        </div>
        <!-- 居中 -->
        <div class="center">
          <button class="ql-align" value="center" v-show="qlCenter"></button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  components: {
    quillEditor
  },
  name: "quill-example-custom-toolbar",
  title: "Custom toolbar",
  data() {
    return {
      content: ``,
      editorOption: {
        placeholder: "请输入公告正文",
        modules: {
          toolbar: "#toolbar"
        }
      },
      isShow: false,
      picture: require("@/assets/picture.png"),
      richTextGray: require("@/assets/rich-text-gray.png"),
      moreGray: require("@/assets/more-gray.png"),
      moreLight: require("@/assets/more-light.png"),
      fontSizeLight: require("@/assets/font-size-light.png"),
      fontSizeGray: require("@/assets/font-size-gray.png"),
      colourGray: require("@/assets/colour-gray.png"),
      colourLight: require("@/assets/colour-light.png"),
      boldGary: require("@/assets/bold-gary.png"),
      boldLight: require("@/assets/bold-light.png"),
      backupsGary: require("@/assets/backups-gary.png"),
      backupsLight: require("@/assets/backups-light.png"),
      timeGary: require("@/assets/time-gary.png"),
      timeLight: require("@/assets/time-light.png"),
      select_CC: 1, // 默认显示未点击状态
      chooseTheTime: 1,
      start: "", // 类名的
      lay_type: 1,
      size_Show: 0,
      color_Show: 1, // 颜色选择器的默认图标显示
      more_Show: 1,
      colour: false, // 控制颜色选择器的是否打开
      fontColour: false, // 控制色值的显示
      sizeBold: true, // 控制字体是否加粗的显示
      textTags: true, // 控制文本是否显示
      moresShow: true, // 更多选择的隐藏显示
      qlCenter: true, // 控制文本是否居中
      fontSizeShow: true,
      colorIndex: "", // 控制颜色选择器的样式
      colorList: [
        {
          value: "#03111B"
        },
        {
          value: "#2E7FF7"
        },
        {
          value: "#F94B4B"
        },
        {
          value: "#9CA1A5"
        }
      ],
      currentIndex: 0,
      startIndex: 0, // 监听start的变化
      startMoreIndex: 0,
      selfInfo: {
        nickName: "",
        token: "",
        userId: "",
        esType: "",
        type: ""
      }, // 个人信息
      textHtml: "",
      imgLength: ""
    };
  },
  mounted() {
    // 将要给原生调用的方法挂载到 window 上面
    window.getUserInfo = this.getUserInfo;
    window.getSelectedImgInfo = this.getSelectedImgInfo;
    window.getEditorContent = this.getEditorContent;
    window.richTextAnalysis = this.richTextAnalysis;
    window.keyboardWillShow = this.keyboardWillShow;
    window.keyboardWillHide = this.keyboardWillHide;
    window.getContentHeight = this.getContentHeight;
    let quill = this.$refs.myQuillEditor.quill;
    quill.setSelection(0);
  },
  created() {},
  methods: {
    getContentHeight() {
      const editor = document.getElementsByClassName("ql-editor")[0]
        .scrollHeight;
      return editor;
    },
    // 载入数据
    richTextAnalysis(res) {
      this.content = res;
    },
    // 获取用户的个人信息
    getUserInfo(data) {
      const res = JSON.parse(data);
      this.selfInfo = res;
    },
    // 获取原生上传的图片的信息
    getSelectedImgInfo(res) {
      const data = JSON.parse(res);
      console.log(data, res);
      data.map(res => {
        this.uploadSuccess(res.fileUrl);
      });
    },
    // 获取富文本的内容传给原生
    getEditorContent() {
      return this.content;
    },
    // 点击打开相册
    openAlbumClick() {
      if (this.selfInfo.esType === "2" && this.imgLength < 23) {
        window.editor.openAlbum();
      } else if (this.selfInfo.esType === 1 && this.imgLength < 23) {
        window.webkit.messageHandlers.openAlbum.postMessage("");
      }
      if (this.imgLength > 23) {
        return;
      }
    },
    // 成功上传之后获取图片信息
    uploadSuccess(res) {
      // res为图片服务器返回的数据
      // 获取富文本组件实例
      let quill = this.$refs.myQuillEditor.quill;
      // 如果上传成功
      let length = quill.getSelection().index;
      // 插入图片 res为服务器返回的图片地址
      quill.insertEmbed(length, "image", res);
      // 调整光标到最后
      quill.setSelection(length + 1);
    },
    // 点击切换颜色背景
    colorSelectionBtn(index) {
      this.currentIndex = index;
    },
    // 点击字体展示
    fontSizeBtn() {
      const fontSize = document.getElementsByClassName("ql-picker")[0];
      const verticalLine = document.getElementsByClassName("verticalLine")[0];
      const fontSizeS = document.getElementsByClassName("font-size")[0];
      const toolbar = document.getElementsByClassName("toolbar")[0];
      const textTags = document.getElementsByClassName("text-tags")[0];
      const center = document.getElementsByClassName("center")[0];
      fontSize.style.display = "none";
      toolbar.style.display = "block";
      textTags.style.display = "block";
      center.style.display = "block";
      verticalLine.style.display = "none";
      fontSizeS.style.display = "block";
      this.colour = true;
    },
    // 点击字体隐藏
    fontSizeGrayBtn() {
      const fontSize = document.getElementsByClassName("ql-picker")[0];
      const verticalLine = document.getElementsByClassName("verticalLine")[0];
      const fontSizeS = document.getElementsByClassName("font-size")[0];
      const toolbar = document.getElementsByClassName("toolbar")[0];
      const textTags = document.getElementsByClassName("text-tags")[0];
      const center = document.getElementsByClassName("center")[0];
      fontSize.style.display = "block";
      verticalLine.style.display = "block";
      fontSizeS.style.display = "block";
      toolbar.style.display = "none";
      center.style.display = "none";
      textTags.style.display = "none";
      this.colour = false;
    },
    // 改变样式
    layOut() {
      if (this.lay_type === 0) {
        this.lay_type = 1;
      } else {
        this.lay_type = 0;
      }
    },
    // 字体大小显示
    sizeShow() {
      if (this.size_Show === 0) {
        this.size_Show = 1;
      } else {
        this.size_Show = 0;
      }
    },
    // 颜色选择
    colorShow() {
      if (this.color_Show === 0) {
        this.color_Show = 1;
      } else {
        this.color_Show = 0;
      }
    },
    // 点击显示富文本工具栏
    btns() {
      this.isShow = true;
      this.fontSizeBtn();
      this.start = 2;
    },
    // 点击隐藏富文本工具栏
    btns1() {
      this.isShow = false;
      this.start = "";
      this.fontSizeBtn();
      this.colourLights();
      this.color_Show = 1;
      this.size_Show = 0;
      const fontSizeS = document.getElementsByClassName("font-size")[0];
      fontSizeS.style.display = "none";
    },
    // 点击选择颜色
    colourGrays() {
      const verticalLine = document.getElementsByClassName("verticalLine")[0];
      const fontSizeS = document.getElementsByClassName("font-size")[0];
      fontSizeS.style.display = "none";
      verticalLine.style.display = "block";
      this.fontColour = true;
      this.sizeBold = false;
      this.textTags = false;
      this.qlCenter = false;
      this.verticalLines = true;
      this.colorIndex = 1;
    },
    // 点击关闭选择颜色
    colourLights() {
      const verticalLine = document.getElementsByClassName("verticalLine")[0];
      verticalLine.style.display = "none";
      const fontSizeS = document.getElementsByClassName("font-size")[0];
      fontSizeS.style.display = "block";
      this.fontColour = false;
      this.sizeBold = true;
      this.textTags = true;
      this.qlCenter = true;
      this.verticalLines = false;
      this.colorIndex = "";
    },
    onEditorReady() {
      // 准备编辑器
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {
      if (this.selfInfo.esType === 1) {
        window.webkit.messageHandlers.inputTextDidChange.postMessage(
          this.content
        );
      }
    } // 内容改变事件
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  }
};
</script>
<style lang="less" scoped>
.wrap {
  height: 100%;
  width: 100%;
}
.editor {
  height: 100%;
}
p {
  margin: 10px;
}
#toolbar {
  display: flex;
  align-items: center;
  user-select: none;
  background-color: #f4f6f8;
  height: 100px;
}
/deep/ .ql-container {
  font-size: 4.267vw;
}
/deep/ .ql-container.ql-snow {
  border: none;
}
.edit_container {
  height: calc(100vh - 60px);
}
.edit_container2 {
  height: calc(100vh - 170px);
}
/deep/ .ql-picker-label {
  display: none;
}
/deep/.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  display: none;
}
/deep/.ql-snow .ql-picker.ql-size {
  width: 100%;
  padding: 0 20px;
}
/deep/ .ql-snow .ql-picker-options {
  display: flex;
  align-items: center;
}
/deep/ .ql-picker-options span:nth-child(1) {
  margin-left: 109px;
}
/deep/ .ql-picker-options span:nth-child(2) {
  margin-left: 69px;
}
/deep/ .ql-picker-options span:nth-child(3) {
  margin-left: 69px;
}
/deep/ .ql-toolbar.ql-snow .ql-picker-options {
  box-shadow: none;
  position: absolute;
  min-width: 94%;
  right: 12px;
  top: -12px;
  height: 46px;
}
/deep/ .ql-toolbar.ql-snow {
  border: none;
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  font-size: 16px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
}
/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  font-size: 18px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  font-size: 14px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
}
/deep/ .ql-snow .ql-picker-options .ql-picker-item {
  padding-top: 0px;
  padding-bottom: 0px;
}
/deep/ .ql-snow .ql-picker-options {
  padding: 1px;
}
.set-up {
  position: fixed;
  bottom: 0px;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
  background-color: #fff;
  width: 100%;
  user-select: none;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  z-index: 999;
}
.set-up1 {
  position: fixed;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  bottom: 0px;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
  background-color: #fff;
  width: 100%;
  user-select: none;
  z-index: 999;
}
.set-up-img {
  display: flex;
  height: 46px;
}
.set-up-img img {
  width: 21px;
  height: 21px;
  padding-top: 12px;
}
.set-structure {
  margin-left: 61px;
}
.font-size {
  position: relative;
  display: none;
}
.font-size img {
  width: 16px;
  height: 18px;
  position: absolute;
  margin-top: 40px;
  margin-left: 40px;
  z-index: 999;
}
.verticalLine {
  width: 1px;
  height: 24px;
  position: absolute;
  background-color: #ebebeb;
  margin-left: 76px;
  margin-top: 36px;
  z-index: 999;
  display: none;
}
/deep/ .ql-snow.ql-toolbar button {
  width: 30px;
  height: 32px;
  position: absolute;
  top: 14px;
  left: 156px;
}
.toolbar {
  background-color: #ffffff;
  min-width: 98%;
  height: 60px;
  position: relative;
  margin-left: 1%;
  border-radius: 5px;
}

.colorSelectionIndex div:nth-child(1) button {
  width: 16px;
  height: 16px;
  background-color: #03111b;
  border-radius: 50%;
  top: 88px;
  left: 117px;
  z-index: 999;
  /deep/ svg {
    display: none !important;
  }
}
.colorSelectionIndex div:nth-child(2) button {
  margin-left: 30px;
  width: 16px;
  height: 16px;
  background-color: #2e7ff7;
  border-radius: 50%;
  top: 88px;
  left: 150px;
  z-index: 999;
  /deep/ svg {
    display: none !important;
  }
}
.colorSelectionIndex div:nth-child(3) button {
  margin-left: 50px;
  width: 16px;
  height: 16px;
  background-color: #f94b4b;
  border-radius: 50%;
  top: 88px;
  left: 190px;
  z-index: 999;
  /deep/ svg {
    display: none !important;
  }
}
.colorSelectionIndex div:nth-child(4) button {
  margin-left: 70px;
  width: 16px;
  height: 16px;
  background-color: #9ca1a5;
  border-radius: 50%;
  top: 88px;
  left: 230px;
  z-index: 999;
  /deep/ svg {
    display: none !important;
  }
}
.colorSelection img {
  width: 16px;
  position: absolute;
  height: 20px;
  top: 85px;
  z-index: 999;
  margin-left: 105px;
}
.colorSelection1 img {
  width: 16px;
  position: absolute;
  height: 20px;
  top: 85px;
  z-index: 999;
  margin-left: 30px;
}
.colorActive {
  width: 22px !important;
  height: 22px !important;
  border: 3px solid #fff !important;
  box-shadow: 0px 0px 8px 0px rgba(38, 38, 38, 0.16) !important;
  top: 85px !important;
}
.text-tags {
  height: 16vw;
  position: relative;
  margin-left: -78%;
}
.center {
  height: 16vw;
  position: relative;
  margin-left: 18%;
}
/deep/ .ql-snow .ql-stroke {
  stroke: #9ca1a5;
}
/deep/ .ql-snow.ql-toolbar button.ql-active .ql-stroke {
  stroke: #333;
}
/deep/ .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke {
  stroke: #9ca1a5;
}
/deep/ .ql-editor .ql-size-huge {
  font-size: 18px;
}
/deep/ .ql-editor .ql-size-small {
  font-size: 14px;
}
/deep/ .ql-editor p {
  font-size: 16px;
}
/deep/ .ql-snow .ql-editor img {
  min-width: 100%;
}
/deep/ .ql-editor.ql-blank::before {
  color: #9ca1a5 !important;
  content: attr(data-placeholder);
  font-style: revert;
  left: 4vw;
  pointer-events: none;
  position: absolute;
  right: 4vw;
  font-size: 16px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: rgba(156, 161, 165, 0.5);
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "小";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "中";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "大";
}
</style>
